<!--
* @author: lzm
* @date: 2023年11月27日10:52:10
* @description：库存管理-历史库存记录
* @update: 2023年11月27日10:52:16
-->
<template>
  <div class="box">
    <div class="inventory-top form-top">
      <el-form ref="historyForm" :model="historyForm" label-width="120px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="物料名称">
              <el-select
                style="width: 100%"
                filterable
                v-model="historyForm.goodsName"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, index) in materialName"
                  :key="index"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="规格型号">
              <el-select
                style="width: 100%"
                filterable
                v-model="historyForm.goodsModel"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, index) in standardsList"
                  :key="index"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="货架名称">
              <el-select
                style="width: 100%"
                filterable
                v-model="historyForm.shelvesName"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, index) in goodsShelves"
                  :key="index"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="关键字">
              <el-input
                style="width: 100%"
                v-model.trim="historyForm.keyWord"
                placeholder="请输入关键字"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="出入库类型">
              <el-select
                filterable
                style="width: 100%"
                v-model="historyForm.type"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, index) in libraryType"
                  :key="index"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="库位号">
              <el-select
                filterable
                style="width: 100%"
                v-model="historyForm.positionName"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, index) in houseLocationNumber"
                  :key="index"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" style="text-align: center">
            <el-button class="chamfer-98" type="primary" @click="searchBtn"
              >查询</el-button
            >
            <el-button
              style="margin-left: 20px"
              class="chamfer-98"
              plain
              @click="resetBtn"
              >重置</el-button
            >
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="inventory-bot table-normal">
      <div class="btnBox" style="text-align: right">
        <el-button type="primary" class="chamfer-98" @click="exportBtn">
          <span class="btn-middle">
            <span>导出</span>
            <img class="btn-icon" src="~@/assets/material_img/exportBtn.png" />
          </span>
        </el-button>
      </div>
      <el-table
        v-loading="loading"
        element-loading-background="rgba(0, 0, 0, 0.6)"
        ref="multipleTable"
        :data="historyTable"
        fit
        style="width: 100%"
        header-row-class-name="tableHeader"
        header-cell-class-name="tableTrHeader"
        row-class-name="tableRow"
        cell-class-name="tableCell"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          align="center"
          type="selection"
          width="80"
          label-class-name="DisabledSelection"
        />
        <el-table-column type="index" label="序号" align="center" width="70" />
        <el-table-column
          prop="goodsName"
          label="物料名称"
          width="100"
          :show-overflow-tooltip="true"
          align="center"
        />
        <el-table-column
          prop="goodsModel"
          label="规格型号"
          width="100"
          :show-overflow-tooltip="true"
          align="center"
        />
        <el-table-column
          prop="shelvesName"
          label="货架名称"
          align="center"
          :show-overflow-tooltip="true"
          width="140"
        />
        <el-table-column
          prop="positionName"
          label="库位号"
          width="80"
          align="center"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            {{scope.row.layerSort}}-{{scope.row.positionName}}
          </template>
        </el-table-column>
        <el-table-column
          prop="type"
          label="出入库类型"
          header-align="center"
          align="center"
          width="110"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.type === 0">未知</span>
            <span v-if="scope.row.type === 1">出库</span>
            <span v-if="scope.row.type === 2">入库</span>
          </template>
        </el-table-column>

        <el-table-column
          prop="realCount"
          label="数量"
          header-align="center"
          align="center"
        />
        <el-table-column
          prop="updateBy"
          label="操作人"
          align="center"
          width="100"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.nickName || '默认用户' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="updateTime"
          label="操作时间"
          header-align="center"
          align="center"
          width="200"
        />
      </el-table>
      <!-- 分页 -->
      <paging-component
        :total="total"
        :page-size="historyForm.currentSize"
        :current-page="historyForm.currentPage"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { getMaterialNameList, getMaterialModelList } from '@/api/materialManage'
import { getHistoryInventoryList,exportGoodsInoutRecordExcelApi,getGoodsShelvesInfoList,
getGoodsShelvesPositionList } from '@/api/inventoryManage'
import pagingComponent from '@/components/PagingComponent/index.vue'
export default {
  components: { pagingComponent },
  data() {
    return {
      // 历史库存记录表单
      historyForm: {
        goodsName: '', // 物料名称
        goodsModel: '', // 规格型号
        shelvesName: '', // 货架名称
        keyWord: '', // 关键字
        type: '', // 出入库类型
        positionName: '', // 库位号
        currentPage: 1, // 页码
        currentSize: 20 // 页尺寸
      },
      total: 0, // 历史库存记录总数
      multipleSelection: [], // 表格勾选数据
      // 物料名称
      materialName: [],
      // 规格型号
      standardsList: [],
      // 货架名称
      goodsShelves: [],
      // 出入库类型
      libraryType: [
        {
          value: 0,
          name: '未知'
        },
        {
          value: 1,
          name: '出库'
        },
        {
          value: 2,
          name: '入库'
        }
      ],
      // 库位号
      houseLocationNumber: [],
      // 历史库存记录列表
      historyTable: [],
      loading: false
    }
  },
  created() {
    this.renderList()
  },
  methods: {
    // 获取列表
    async renderList() {
      this.loading = true
      const { result } = await getHistoryInventoryList(this.historyForm)
      this.total = Number(result.totalCount)
      this.historyTable = result.currentData
      // 更新下拉菜单数据
      let { result: list1 } = await getMaterialNameList()
      this.materialName = list1
      let { result: list2 } = await getMaterialModelList()
      this.standardsList = list2
      let { result: list3 } = await getGoodsShelvesInfoList()
      this.goodsShelves = list3
      let { result: list4 } = await getGoodsShelvesPositionList()
      this.houseLocationNumber = list4
      this.loading = false
    },
    // 查询
    searchBtn() {
      this.historyForm.currentPage = 1
      this.renderList()
    },
    // 重置
    resetBtn() {
      this.historyForm = {
        goodsName: '', // 物料名称
        goodsModel: '', // 规格型号
        shelvesName: '', // 货架名称
        keyWord: '', // 关键字
        type: '', // 出入库类型
        id: '', // 库位号
        currentPage: 1, // 页码
        currentSize: 20 // 页尺寸
      }
      this.renderList()
    },
    // pageSize改变时会触发(每页数据条数)
    handleSizeChange(val) {
      this.historyForm.currentSize = val
      this.renderList()
    },
    // currentPage改变时会触发(当前页码数)
    handleCurrentChange(val) {
      this.historyForm.currentPage = val
      this.renderList()
    },
    // 导出
    async exportBtn() {
      if (this.multipleSelection.length > 0) {
        // 创建一个数组，里面存勾选数据的id
        let delArrayData = []
        this.multipleSelection.forEach((item) => {
          delArrayData.push(item.id)
        })
        await exportGoodsInoutRecordExcelApi({ ids: delArrayData })
          .then((result) => {
            const content = result
            const blob = new Blob([content], {
              type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
            }) //处理返回
            const fileName = '出入库信息.xlsx'
            if ('download' in document.createElement('a')) {
              // 非IE下载
              const elink = document.createElement('a')
              elink.download = fileName
              elink.style.display = 'none'
              elink.href = URL.createObjectURL(blob)
              document.body.appendChild(elink)
              elink.click()
              URL.revokeObjectURL(elink.href) // 释放URL 对象
              document.body.removeChild(elink)
            } else {
              // IE10+下载
              navigator.msSaveBlob(blob, fileName)
            }
          })
          .catch((err) => {
            this.$message({
              type: 'error',
              message: '导出失败!'
            })
          })
      } else {
        await exportGoodsInoutRecordExcelApi(this.historyForm)
          .then((result) => {
            const content = result
            const blob = new Blob([content], {
              type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
            }) //处理返回
            const fileName = '出入库信息.xlsx'
            if ('download' in document.createElement('a')) {
              // 非IE下载
              const elink = document.createElement('a')
              elink.download = fileName
              elink.style.display = 'none'
              elink.href = URL.createObjectURL(blob)
              document.body.appendChild(elink)
              elink.click()
              URL.revokeObjectURL(elink.href) // 释放URL 对象
              document.body.removeChild(elink)
            } else {
              // IE10+下载
              navigator.msSaveBlob(blob, fileName)
            }
          })
          .catch((err) => {
            this.$message({
              type: 'error',
              message: '导出失败!'
            })
          })
      }
    },
    // 获取勾选数据表格
    handleSelectionChange(val) {
      this.multipleSelection = val
    }
  }
}
</script>
<style lang="scss">
@import '~@/styles/_handle.scss';
.inventory-bot {
  .el-table {
    // 二级
    .tableTrHeaderSnd {
      font-weight: normal;
      border: 1px solid;
      @include border_color('second_table_border_color');
      @include background('second_table_head_bg_color');
    }
    // 二级
    .tableCellSnd {
      color: #ffffff;
      font-size: 18px;
      border: 1px solid;
      @include border_color('second_table_border_color');
      @include background('second_table_row_bg_color');
    }
    .expanded {
      @include background('second_table_expanded_bg_color');
    }
  }
}
.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
  @include background('table_hover_color');
}
</style>
<style scoped lang="scss">
@import '~@/styles/_handle.scss';
.inventory-top {
  @include form_bgcolor('form_bgcolor');
}
.box{
  height: 100%;
}
::v-deep.inventory-top {
  padding: 20px;
  width: 100%;
  height: 198px;
  border-radius: 10px;
  .el-form-item {
    margin-bottom: 16px;
  }
  .chamfer-98 {
    font-size: 18px;
  }
}
::v-deep.inventory-bot {
  height: calc(100% - 198px);
  padding: 20px 10px;
  .btnBox {
    height: 44px;
    .chamfer-98 {
      font-size: 18px;
      text-align: center;
      .btn-middle {
        display: flex;
        align-items: center;
        .btn-icon {
          margin-left: 4px;
          width: 16px;
          height: 16px;
        }
      }
    }
  }
  .el-table {
    height: calc(100% - 120px);
    .el-table__body-wrapper{
      height: calc(100% - 48px);
      overflow-y: auto;
    }
    .el-table__body-wrapper::-webkit-scrollbar{
      width: 6px;
      height: 8px;
    }
    tr {
      background: transparent;
    }
    margin-top: 14px;
    background: transparent;
    border: none;
    .tableTrHeader {
      border: none;
    }
    // 二级
    .tableHeaderSnd {
      color: #ffffff;
      font-size: 18px;
    }
    // 隐藏折叠小箭头
    .el-table__expand-icon {
      color: transparent;
    }
  }
}
// 暂无数据时展示样式
::v-deep .el-table__empty-block {
  min-height: 240px;
  font-size: 20px;
}
// 取消表格底部横线
::v-deep .el-table--border::after,
.el-table--group::after,
.el-table::before {
  content: none;
}
</style>
